<template>
  <div class="app-container">
    <!-- 查询start -->
    <div class="filter-container">
      <el-input v-model="queryParams.name" placeholder="分类名称" style="width: 200px;" class="filter-item" />
      <el-select v-model="queryParams.isDisplay" placeholder="是否显示" clearable style="width: 90px" class="filter-item">
        <el-option value="true" label="显示" />
        <el-option value="false" label="隐藏" />
      </el-select>
      <el-select v-model="queryParams.platform" placeholder="平台" clearable style="width: 90px" class="filter-item">
        <el-option
          v-for="item in platforms"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-circle-plus" @click="add">添加分类</el-button>
    </div>
    <!-- 查询end -->
    <!-- 表格start -->
    <table-model ref="tableModel" :page-fun="getPage" :handler-data="handelData" style="margin-top: 10px" :columns="columns" :edit-fun="getData" :control-column="true">
      <!-- 添加columns -->
      <!--<template slot="tableColumn">
        <el-table-column align="center" label="IDbs" width="95">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
      </template>-->
      <!-- 添加button -->
      <!--<template slot="Button" slot-scope="scope">
        <el-button type="warning" size="small" icon="el-icon-menu" @click="getSmg(scope.row)">test</el-button>
      </template>-->
    </table-model>
    <!-- 表格end -->
    <!-- 弹窗start -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :model="dataForm" :rules="rules" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="平台">
          <el-select v-model="dataForm.platform" placeholder="请选择平台" prop="platform">
            <el-option
              v-for="item in platforms"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="dataForm.name" :disabled="dataForm.id === '' ? false : true" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="dataForm.sort" type="number" />
        </el-form-item>
        <el-form-item label="前台显示">
          <el-radio-group v-model="dataForm.isDisplay">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="createData('dataForm')">添加</el-button>
        <el-button v-else type="primary" @click="updateData('dataForm')">更新</el-button>
      </div>
    </el-dialog>
    <!-- 弹窗end -->
  </div>
</template>

<script>
import { getList, addBloggerType, updateBloggerType, getBloggerTypeById } from '@/api/blogger/type'
import { objectToFormData } from '@/utils'
import tableModel from '@/components/Table'

export default {
  components: { tableModel },
  data() {
    return {
      list: null,
      queryParams: {
        name: '',
        isDisplay: '',
        platform: ''
      },
      listLoading: true,
      platforms: [
        {
          text: 'TikTok',
          value: 'TikTok'
        }
      ],
      dialogFormVisible: false,
      columns: [
        {
          text: 'ID',
          value: 'id',
          width: 95
        },
        {
          text: '类型名称',
          value: 'name'
        },
        {
          text: '数量',
          value: 'count'
        },
        {
          text: '排序',
          value: 'sort'
        },
        {
          text: '前台显示',
          value: 'isDisplay'
        }
      ],
      dialogStatus: '',
      textMap: {
        update: '更新',
        create: '创建'
      },
      dataForm: {
        id: '',
        name: '',
        isDisplay: true,
        sort: '0',
        platform: 'TikTok',
        createBy: ''
      },
      rules: {
        platform: [
          { required: true, message: '请选择平台' }
        ],
        name: [
          { required: true, message: '请输入分类名称' }
        ],
        sort: [
          { required: true, message: '请输入排序' }
        ]
      }
    }
  },
  methods: {
    search() {
      this.fetchData()
    },
    // 调用table-model的分页方法
    fetchData() {
      this.$refs.tableModel.getPage(this.queryParams)
    },
    // 分页方法
    getPage(params) {
      return new Promise((resolve, reject) => {
        getList(params).then(response => {
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 操作表格数据
    handelData(data) {
      data.forEach(d => {
        d.isDisplay = d.isDisplay === true ? '显示' : '隐藏'
      })
      return data
    },
    getData(id) {
      const other = this
      if (this.$refs['dataForm'] !== undefined) {
        this.$refs['dataForm'].resetFields()
      }

      getBloggerTypeById(id).then(response => {
        other.dataForm.id = response.id
        other.dataForm.name = response.name
        other.dataForm.isDisplay = response.isDisplay
        other.dataForm.platform = response.platform
        other.dataForm.sort = response.sort
        other.dataForm.createBy = response.createBy
        other.dialogFormVisible = true
        other.dialogStatus = 'update'
      })
    },
    resetForm() {
      this.dataForm.id = ''
      this.dataForm.name = ''
      this.dataForm.isDisplay = true
      this.dataForm.sort = '0'
      this.dataForm.createBy = ''
      this.dataForm.platform = 'TikTok'
    },
    add() {
      this.resetForm()
      this.dialogFormVisible = true
      this.dialogStatus = 'create'
    },
    createData(formName) {
      const other = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          other.dialogFormVisible = false
          addBloggerType(objectToFormData(this.dataForm)).then(response => {
            other.$message.success('添加成功')
            other.fetchData()
            other.$refs['dataForm'].resetFields()
            other.resetForm()
          })
        }
      })
    },
    updateData(formName) {
      const other = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          other.dialogFormVisible = false
          updateBloggerType(this.dataForm).then(response => {
            other.$message.success('更新成功')
            other.fetchData()
            this.$refs['dataForm'].resetFields()
            this.resetForm()
          })
        }
      })
    }
  }
}
</script>
